<template>
  <div id="app">
    <div v-if="pageIndex ===1">
      <div style="text-align: left;">
        <span>工作标签:   </span>
        <el-tag style="left: 20px"
                v-for="tag in tags"
                @click.native="myLabel(tag.name)"
                :key="tag.name"
                :type="tag.type">
          {{ tag.name }}
        </el-tag>
      </div>
      <div style="margin-top: 20px;">
        <el-table v-loading="listLoading"
                  :data="result.list"
                  border
                  :header-cell-style="headClass"
                  :cell-style="rowClass"
                  style="width: 100%">
          <el-table-column
              prop="jobName"
              label="工作名称"
              width="180">
          </el-table-column>
          <el-table-column
              prop="salary"
              label="工资待遇"
              width="180">
          </el-table-column>
          <el-table-column
              prop="degree"
              label="学历要求"
              width="180">
            <template slot-scope="scope">
              <div v-if="scope.row.degree===0">
                <span>初中</span>
              </div>
              <div v-if="scope.row.degree===1">
                <span>高中</span>
              </div>
              <div v-if="scope.row.degree===2">
                <span>本科</span>
              </div>
              <div v-if="scope.row.degree===3">
                <span>研究生</span>
              </div>
              <div v-if="scope.row.degree===4">
                <span>博士</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
              prop="jobTypeName"
              label="工作类型"
              width="180">
          </el-table-column>
          <el-table-column
              prop="label"
              label="工作标签"
              width="180">
          </el-table-column>
          <el-table-column
              prop="city"
              label="工作地点"
              width="180">
          </el-table-column>
          <el-table-column
              label="操作">
            <template slot-scope='scope'>
              <el-button type="primary" size="mini" @click="myDeliveriesPre(scope.row.jobId)">投递情况</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 底栏容器 -->
        <el-footer style="text-align: left;">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryParam.pageNum"
              :page-sizes="[10,20,30,40,50,100,200,500,1000]"
              :page-size="queryParam.pageSize"
              :layout="queryParam.isCount ? 'total, sizes, prev, pager, next, jumper' : 'sizes, prev, next'"
              :total="result.totalNum">
          </el-pagination>
        </el-footer>
      </div>
    </div>
    <div v-if="pageIndex===2">
      <el-row style="text-align: left">
        <el-col :span="24">
          <el-button size="medium"
                     type="success"
                     @click="changePageIndex(1)">返回
          </el-button>
        </el-col>
      </el-row>
      <el-table v-loading="listLoading"
                :data="deliveries.list"
                border
                :header-cell-style="headClass"
                :cell-style="rowClass"
                style="width: 100%;margin-top: 20px;">
        <el-table-column
            prop="jobName"
            label="工作名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="companyName"
            label="企业名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="seekerName"
            label="求职者名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="message"
            label="招呼语"
            width="250">
        </el-table-column>
        <el-table-column
            prop="createdTime"
            label="创建时间"
            width="180">
          <template slot-scope="scope">
            <span>{{ dateFormat(scope.row.createdTime) }}<br></span>
          </template>
        </el-table-column>
        <el-table-column
            prop="auditStatus"
            label="处理结果"
            width="180">
          <template slot-scope="scope">
            <div v-if="scope.row.auditStatus===0">
              <span>未处理</span>
            </div>
            <div v-if="scope.row.auditStatus===1">
              <span>处理中</span>
            </div>
            <div v-if="scope.row.auditStatus===2">
              <span>不合适</span>
            </div>
            <div v-if="scope.row.auditStatus===3">
              <span>人才库</span>
            </div>
            <div v-if="scope.row.auditStatus===4">
              <span>合适</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope='scope'>
            <el-button type="primary" size="mini" @click="readSeeker(scope.row.seekerId)">查看求职者</el-button>
            <el-button type="info" size="mini" @click="updateDeliveryPre(scope.row.id)">修改状态</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-footer style="text-align: left;">
        <el-pagination
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :current-page="queryParam2.pageNum"
            :page-sizes="[10,20,30,40,50,100,200,500,1000]"
            :page-size="queryParam2.pageSize"
            :layout="queryParam2.isCount ? 'total, sizes, prev, pager, next, jumper' : 'sizes, prev, next'"
            :total="deliveries.totalNum">
        </el-pagination>
      </el-footer>
    </div>
    <div v-if="pageIndex===3">
      <el-row style="text-align: left">
        <el-col :span="24">
          <el-button size="medium"
                     type="success"
                     @click="changePageIndex(2)">返回
          </el-button>
        </el-col>
      </el-row>

      <div style="width: 400px;margin-top: 20px;">
        <el-form ref="form" :model="seekerDetail" disabled label-width="80px" v-loading="listLoading"
                 class="el-form-css">
          <el-form-item label="用户名:">
            <el-input v-model="seekerDetail.seekerName"></el-input>
          </el-form-item>
          <el-form-item label="性别:">
            <el-col :span="10">
              <el-radio-group v-model="seekerDetail.sex">
                <el-radio :label=0>男</el-radio>
                <el-radio :label=1>女</el-radio>
              </el-radio-group>
            </el-col>
            <el-col :span="14">
            </el-col>
          </el-form-item>
          <el-form-item label="学历:">
            <el-select v-model="seekerDetail.degree" placeholder="请选择最高学历">
              <el-option label="小学" :value=0></el-option>
              <el-option label="高中" :value=1></el-option>
              <el-option label="本科" :value=2></el-option>
              <el-option label="研究生" :value=3></el-option>
              <el-option label="博士" :value=4></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地址:">
            <el-input type="textarea" maxlength="250" show-word-limit :autosize="{ minRows: 3}"
                      v-model="seekerDetail.address"
                      style="width: 300px"></el-input>
          </el-form-item>
        </el-form>
        <span>简历照片: </span>
        <el-image :src="image" style="width: 100px; height: 100px"
                  :preview-src-list="srcList"></el-image>
      </div>
    </div>
    <el-dialog title="修改处理进度" :visible.sync="dialogVisible" width="30%">
      <el-form>
        <el-select v-model="form.auditStatus" placeholder="请选择处理进度">
          <el-option label="未处理" :value=0></el-option>
          <el-option label="处理中" :value=1></el-option>
          <el-option label="不合适" :value=2></el-option>
          <el-option label="人才库" :value=3></el-option>
          <el-option label="合适" :value=4></el-option>
        </el-select>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateDelivery()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>


import jwtUtil from "jwt-decode";
import {
  getCompanyJobs,
  getCompanyJobsLabel,
  getImage,
  getReadDeliveries,
  getSeekerDetail,
  patchUpdateDelivery
} from "@/api";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "comDeliveries",
  data() {
    return {
      dialogVisible: false,
      pageIndex: 1,
      user: {
        userId: '',
        objectId: '',
        userType: ''
      },
      listLoading: false,
      queryParam: {
        pageNum: 1,
        pageSize: 10,
        isCount: true,
        companyId: '',
        label: ''
      },
      result: {
        list: [],
        totalNum: -1
      },
      queryParam2: {
        pageNum: 1,
        pageSize: 10,
        isCount: true,
        jobId: ''
      },
      deliveries: {
        list: [],
        totalNum: -1
      },
      tags: [],
      seekerDetail: {},
      srcList: [''],
      image: '',
      form: {
        deliveryId: '',
        auditStatus: '',
      }
    }

  },
  methods: {
    headClass() {
      return "text-align:center"
    },
    rowClass() {
      return "text-align:center"
    },
    handleSizeChange(val) {
      this.queryParam.pageSize = val
      this.myList()
    },
    handleCurrentChange(val) {
      this.queryParam.pageNum = val
      this.myList()
    },
    handleSizeChange2(val) {
      this.queryParam2.pageSize = val
      this.myDeliveries()
    },
    handleCurrentChange2(val) {
      this.queryParam2.pageNum = val
      this.myDeliveries()
    },
    dateFormat(it) {
      let date = new Date(it * 1000)
      return (
          date.getFullYear() +
          '年' +
          (date.getMonth() + 1) +
          '月' +
          date.getDate() +
          '日'
      );
    },
    changePageIndex(pageIndex) {
      this.pageIndex = pageIndex;
    },
    //方法
    myLabel(item) {
      if (item === '全部') {
        this.queryParam.label = null
      } else {
        this.queryParam.label = item
      }
      this.myList()
    },
    myList() {
      this.listLoading = true
      this.queryParam.companyId = this.$route.query.id
      getCompanyJobs(this.queryParam).then(res => {
        this.result.list = res.data.list
        this.result.totalNum = res.data.totalNum
        this.listLoading = false
      })
    },
    myDeliveriesPre(item) {
      this.queryParam2.jobId = item
      this.myDeliveries()
    },
    myDeliveries() {
      this.pageIndex = 2
      this.listLoading = true
      getReadDeliveries(this.queryParam2).then(res => {
        this.deliveries.list = res.data.list
        this.deliveries.totalNum = res.data.totalNum
        this.listLoading = false
      })
    },
    readSeeker(item) {
      this.listLoading = true
      getSeekerDetail(item).then(res => {
        this.seekerDetail = {}
        this.$set(this.seekerDetail, 'id', res.data.id)
        this.$set(this.seekerDetail, 'seekerName', res.data.seekerName)
        this.$set(this.seekerDetail, 'sex', res.data.sex)
        this.$set(this.seekerDetail, 'degree', res.data.degree)
        this.$set(this.seekerDetail, 'address', res.data.address)
        this.$set(this.seekerDetail, 'resume', res.data.resume)
        getImage({
          objectId: this.seekerDetail.id,
          fileName: this.seekerDetail.resume,
          userType: 1,
          fileType: 2
        }).then(res => {
          this.image = window.URL.createObjectURL(res.data);
          this.srcList[0] = window.URL.createObjectURL(res.data);
        })
        this.listLoading = false
        this.changePageIndex(3)
      })

    },
    updateDelivery() {
      patchUpdateDelivery(this.form).then(() => {
        this.dialogVisible = false
        this.$message.success('修改成功')
        this.myDeliveries()
      })
    },
    updateDeliveryPre(item) {
      this.form.deliveryId = item
      this.dialogVisible = true
    }
  },
  created() {
    this.user = jwtUtil(window.localStorage.getItem('Token'))
    getCompanyJobsLabel(this.$route.query.id).then(res => {
      this.tags = []
      this.tags.push({name: '全部', type: ''})
      res.data.list.forEach(it => {
        if (it !== '') {
          this.tags.push({name: it, type: ''})
        }
      })
    })
    this.myList()
  }
}
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}

.el-form-css .el-input, .el-select {
  width: 300px;
}
</style>